<template>
	<view>
		<uni-nav-bar ref="navBar" fixed statusBar title="选择商户" :border="false" backgroundColor="#ffffff"
			@clickLeft="goBack">
			<template v-slot:left>
				<image src="@/static/svg/publicSvg/icon-back.svg" />
			</template>
		</uni-nav-bar>
		<view :style="{'height':h}">
			<view class="flex item-center search-box">
				<image src="@/static/svg/publicSvg/icon-search.svg" mode="heightFix" class="icon-search"></image>
				<input type="text" placeholder="搜索商户名称" class="search-text" v-model="params.merchantName">
			</view>
			<scroll-view scroll-y="true" :style="{'height':listHeight}">
				<view v-for="item in merchantData.filterOptions" :key="item.id" class="flex item-center px-16 py-12"
					@click="selectMerchant(item)">
					<view class="checkbox-area">
						<image src="@/static/svg/publicSvg/radio-checked.svg" mode="" class="radio-default"
							v-if="merchantData.selected?.id===item.id"></image>
						<image src="@/static/svg/publicSvg/radio-default.svg" mode="" class="radio-default" v-else>
						</image>
					</view>
					<view class="mr-8">
						<image :src="item.avatar" class="merchant-logo"></image>
					</view>
					<view class="fs-16">
						{{item.merchantShortName}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="btn-box flex justify-between">
			<view class="btn-gary" @click="callBack()">取消</view>
			<view class="btn-red" @click="sendSubmit()">确认</view>
		</view>

	</view>
</template>

<script setup name="SelectBusinessMerchant">
	import {
		ref,
		watch,
		onMounted,
		reactive,
		defineComponent,
		getCurrentInstance
	} from 'vue'
	import {
		mathHeight,
		judegDit
	} from '@/utils/index.js'
	import {
		getMyBusinessMerchantList
	} from '@/api/business.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		useUserStore
	} from '@/stores/modules/user.js'
	const userStore = useUserStore()
	const userInfo = userStore.userInfo
	const h = mathHeight(140)
	const listHeight = mathHeight(196)

	const params = reactive({
		merchantName: '',
	})

	const merchantData = reactive({
		options: [],
		filterOptions: [],
		selected: undefined
	})
	const selectMerchant = (item) => {
		merchantData.selected = item;
	}
	const initOptions = async () => {
		const data = await getMyBusinessMerchantList();
		merchantData.options = data;
		initSelectedInfo();
		params.merchantName='';
		changeMerchantParam()
	}

	onMounted(() => {
		initOptions();
	})

	let getOpenerEventChannel = ref(null)
	onLoad((params) => {
		getOpenerEventChannel.value = getCurrentInstance().ctx.getOpenerEventChannel()
		getOpenerEventChannel.value?.on('acceptData', data => {
			merchantData.selected = {
				id: data.id
			};
			initSelectedInfo();
		})
	})

	const initSelectedInfo = () => {
		if (merchantData.selected?.id) {
			merchantData.selected = merchantData.options.find(item => item.id === merchantData.selected.id) ||
				merchantData
				.selected;
		}
	}

	const sendSubmit = () => {
		if (!merchantData.selected) {
			uni.showToast({
				icon: 'none',
				title: '请选择一个商户！',
			})
			return;
		}
		getOpenerEventChannel.value?.emit('reFreshPage', merchantData.selected)
		uni.navigateBack({
			delta: 1
		})
	}
	
	watch(()=>params.merchantName,()=>{
		changeMerchantParam();
	});
	
	const changeMerchantParam = ()=>{
		merchantData.filterOptions  = merchantData.options.filter((item)=>{
			return item.merchantShortName.includes(params.merchantName.trim());
		});
	}

	const goBack = () => {
		// console.log(fileLists,'fileLists.value')
		// if (formData.value.goodsName || formData.value.goodsPrice || formData.value.originPrice || formData.value
		// 	.totalStock || formData.value.details || (fileLists.value && fileLists.value.length)) {
		// 	popup.value.open('bottom')
		// } else {
		// 	uni.navigateBack()
		// }
		uni.navigateBack()
	}
	const callBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.search-box {
		height: 36px;
		margin: 10px 20px;
		padding: 10px;
		border-radius: 6px;
		background-color: #ffffff;
		min-height: 20px;

		.icon-search {
			height: 20px;
			margin-right: 10px;
		}

		.search-text {
			font-size: 12px;
		}
	}

	.checkbox-area {
		display: block;
		width: 30px;
		margin-right: 8px;
		text-align: center;
	}

	.radio-default {
		height: 24px;
		width: 24px;
	}

	.merchant-logo {
		width: 80px;
		height: 80px;
		border-radius: 8px;
	}

	.btn-box {
		padding: 20px;
		background-color: #ffffff;

		.btn-gary,
		.btn-red {
			width: 40%;
			height: 46px;
			padding: 12px, 45px, 12px, 45px;
			border-radius: 8px;
			border: 1px solid #333333;
			color: #333333;
			text-align: center;
			line-height: 46px;
		}

		.btn-red {
			background: #FA4543;
			color: #ffffff;
			border-color: #FA4543;
		}
	}
</style>